<template>
	<!-- 全真模拟-在线组卷-手动组卷【设置题型】 -->
	<view>
		<u-navbar back-icon-color="#fff" :isFixed="true" :border-bottom="false" title="设置题型" title-color="#FFFFFF">
			<template v-slot:right>
				<text class="confirm" @click="submit">确定</text>
			</template>
		</u-navbar>
		<view class="form-item">
			<view class="title">
				<text>单选题</text>
				<text>(共{{queCount && queCount.singleChoiceCount}}道)</text>
			</view>
			<view class="input-container">
				<text class="pre-text">数量</text>
				<input type="number" @input="onInput($event, 'singleChoiceCount')" placeholder="输入数量" v-model.number="formData.singleChoiceCount" />
			</view>
		</view>
		<view class="form-item">
			<view class="title">
				<text>多选题</text>
				<text>(共{{ queCount && queCount.multipleChoiceCount }}道)</text>
			</view>
			<view class="input-container">
				<text class="pre-text">数量</text>
				<input type="number" @input="onInput($event, 'multipleChoiceCount')" placeholder="输入数量" v-model.number="formData.multipleChoiceCount" />
			</view>
		</view>
		<view class="form-item">
			<view class="title">
				<text>判断题</text>
				<text>(共{{ queCount && queCount.trueFalseCount }}道)</text>
			</view>
			<view class="input-container">
				<text class="pre-text">数量</text>
				<input type="number" @input="onInput($event, 'trueFalseCount')" placeholder="输入数量" v-model.number="formData.trueFalseCount" />
			</view>
		</view>
		<view class="form-item-group">
			<view class="form-item">
				<view class="input-container">
					<text class="pre-text title"><text>时间设置</text><text>(分钟)</text></text>
					<picker mode="selector" :range="minutesArr" :value="minIndex" @change="onMinutesChange">
						<view class="seletorTime">{{ minutesArr[minIndex] }}</view>
					</picker>
					<my-icon name="bd-next"></my-icon>
				</view>
			</view>
			<view class="form-item">
				<view class="input-container">
					<text class="pre-text">试卷名称</text>
					<input maxlength="15"  placeholder="请输入试卷名称" v-model="formData.paperName" />
				</view>
			</view>
		</view>
		
		<!-- <my-confirm ref="headBack" @cancel="backCancel()" @confirm="backSubmit()" confirm-text="立即答题" cancel-text="稍后再做">手动组卷成功!</my-confirm> -->
	</view>
</template>

<script>
// import exam from '../../../mixins/exam.js';
export default {
	// mixins: [exam],
	data() {
		return {
			formData: {
				chapterId: '',
				groupType: 0,
				minutes: 90,
				multipleChoiceCount: null,
				paperName: '',
				singleChoiceCount: null,
				subId: '',
				trueFalseCount: null
			},
			minIndex: 89,
			queCount: null,
			paper:{},
			linkType:0,//需要返回发布考试列表
		};
	},
	computed: {
		minutesArr() {
			const minutes = [];
			for (let i = 0; i < 100; i++) minutes.push(i + 1);
			return minutes;
		}
	},
	onLoad(option) {
		this.formData.groupType = option.groupType;
		this.formData.subId=option.subId;
		this.linkType=option.linkType
		const chapterInfo = uni.getStorageSync('chapterInfo');
		let selectedChapters = [];
		for (var i = 0; i < chapterInfo.length; i++) {
			const sub = chapterInfo[i];
			if (sub.checked) selectedChapters = selectedChapters.concat(sub.chapterList);
			else selectedChapters = selectedChapters.concat(sub.chapterList.filter(item => item.checked));
		}
		this.formData.chapterId = selectedChapters.map(item => item.chapterid).join(',');
		this.getQueCount();
	},
	methods: {
		submit() {
			if (!this.checkFields()) return;
			this.request.post('/app/proposition/groupPaper', this.formData).then(paper => {
				this.paper=paper;
				uni.showToast({
					title:"组卷成功",
					duration:1000,
					icon:"success"
				})
				const linktype=parseInt(this.linkType)
				setTimeout(function(){
					// const url=linktype==1?'../exam/examSelect':'../paperManagement/paperManagement'
					if(linktype == 1){
						uni.navigateBack({
							// url:'../exam/examSelect'
								delta: 3,
						})
					} else {
						uni.navigateBack({
							// url:'../exam/examSelect'
								delta: 2,
						})
					}
				},1000)
			});
		},

		checkFields() {
			const { multipleChoiceCount, singleChoiceCount, trueFalseCount, minutes, paperName } = this.formData;
			if (!(multipleChoiceCount || singleChoiceCount || trueFalseCount)) {
				uni.showToast({
					title: '请至少输入一种题目数量！',
					icon: 'none'
				});
				return false;
			}

			if (!minutes) {
				uni.showToast({
					title: '请输入考试时长！',
					icon: 'none'
				});
				return false;
			}
			if (!paperName) {
				uni.showToast({
					title: '请输入试卷名称！',
					icon: 'none'
				});
				return false;
			}
			const numberFields = ['multipleChoiceCount', 'singleChoiceCount', 'trueFalseCount', 'minutes'];
			for (let i = 0; i < numberFields.length; i++) {
				const key = numberFields[i];
				if(!this.formData[key]){
					this.formData[key]=0
				}
				const item = this.formData[key];
				if (typeof item !== 'number') {
					uni.showToast({
						title: key === 'minutes' ? '时长' : '题目数量' + '必须为数字！',
						icon: 'none'
					});
					return false;
				}
			}
			return true;
		},
		onMinutesChange(e) {
			this.minIndex = e.target.value;
			this.formData.minutes = this.minIndex + 1;
		},
		getQueCount() {
			this.request.get(`/app/proposition/getQueCountByChapterId/${this.formData.chapterId}`).then(res => {
				this.queCount = res;
			});
		},
		onInput(e, key) {
			const val = e.detail.value;
			if (key.includes('Count') && val > this.queCount[key]) {
				this.$nextTick(function() {
					this.formData[key] = this.queCount[key];
				});
			}
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss">
.confirm {
	font-size: 30upx;
	font-weight: 400;
	color: #ffffff;
	padding-right: 30upx;
}
.title {
	line-height: 100upx;
	font-size: 30upx;
	font-weight: 400;
	color: #636874;
	text:last-child {
		color: #a9abb0;
	}
}
.iconfont {
		color: #cccccc;
		font-size: 24upx;
}
.seletorTime{
	color: #363940!important;
	font-size: 32upx;
	margin-right: 10upx;
}
.form-item > * {
	padding: 0 30upx;
}
.input-container {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	text {
		font-size: 32upx;
		color: black;
	}
	input {
		height: 110upx;
		font-size: 32upx;
		text-align: right;
		position: relative;
		flex: 1;
	}
	uni-picker {
		// height: 110upx;
		line-height: 110upx;
		flex: 1;
		text-align: right;
	}
}
.form-item-group {
	margin-top: 20upx;
	background-color: #ffffff;
	.form-item {
		* {
			padding: 0;
		}
		margin: 0 30upx;
	}
	.form-item + .form-item {
		border-top: 1px solid #ebebeb;
	}
}
</style>
